import { memo } from 'react'
import styles from './index.module.scss'
import EditCanvas from './EditCanvas'
import useLoadQuestionData from '@/hooks/useLoadQuestionData'
import { useDispatch } from 'react-redux'
import { changeSelectedId } from '@/store/modules/componentsReducer'
import LeftPanel from './LeftPanel'
import RightPanel from './RightPanel'
import EditHeader from './EditHeader'

const Edit = memo(() => {
  const { loading } = useLoadQuestionData()
  const dispatch = useDispatch()

  const clearSelectedId = () => {
    dispatch(changeSelectedId(''))
  }

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <EditHeader />
      </div>
      <div className={styles.content}>
        <div className={styles.left}>
          <LeftPanel />
        </div>
        <div className={styles.main} onClick={clearSelectedId}>
          <div className={styles.canvas}>
            <EditCanvas loading={loading} />
          </div>
        </div>
        <div className={styles.right}>
          <RightPanel />
        </div>
      </div>
    </div>
  )
})

export default Edit
